<template>
  <el-dialog
    title="分配权限"
    :model-value="modelValue"
    :show-close="false"
    :close-on-click-modal="false"
  >
    <el-tree
      ref="elTreeRef"
      style="max-width: 600px"
      :data="right1Data"
      show-checkbox
      :props="defaultProps"
      node-key="id"
      default-expand-all
      @check="handleChange"
      :default-checked-keys="defaultCheck1Data"
    >
    </el-tree>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closed">取消</el-button>
        <el-button type="primary" @click="onConfirm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { defineProps, defineEmits, ref, watch } from 'vue'
import utils from '@/utils/utils'
import { changeAcls, roleTree } from '@/api/role'

const elTreeRef = ref([])
const aclIds = ref('')
const right1Data = ref([])
const defaultCheck1Data = ref([])
const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  },
  roleId: {
    type: String,
    required: true
  }
})
const emits = defineEmits(['update:modelValue'])
const handleChange = () => {
  const son = elTreeRef.value.getCheckedNodes(true, true)
  console.log('son : ' + JSON.stringify(son))
  aclIds.value = ''
  son.forEach((item) => {
    if (item.aclId !== -1) {
      aclIds.value += item.aclId + ','
    }
  })
  console.log(aclIds.value)
}

const loadRoleAcl = async (roleSelectId) => {
  if (roleSelectId === -1) {
    return
  }
  utils.showLoadding()
  const result = await roleTree({
    roleId: roleSelectId
  })
  console.log(JSON.stringify(result))
  renderRoleTree(result)
  utils.hideLoadding()
}
loadRoleAcl(props.roleId)

const renderRoleTree = aclModuleList => {
  outIndex.value = 1
  right1Data.value = recursivePrepareTreeData(aclModuleList, [])
  console.log('right1Data : ' + JSON.stringify(right1Data.value))
}
const outIndex = ref(1)
const recursivePrepareTreeData = (aclModuleList, totalModuleList = []) => {
  if (aclModuleList && aclModuleList.length > 0) {
    aclModuleList.forEach((aclModule, i) => {
      console.log('i : ' + JSON.stringify(aclModule))
      totalModuleList.push({
        id: outIndex.value,
        moduleId: aclModule.id,
        aclId: -1,
        label: aclModule.name,
        isLast: false,
        opened: false,
        children: []
      })
      outIndex.value++
      if (aclModule.aclModuleList && aclModule.aclModuleList.length > 0) {
        const total = recursivePrepareTreeData(aclModule.aclModuleList, [])
        // console.log('total : ' + JSON.stringify(total))
        totalModuleList[i].children = total
      }
      if (aclModule.aclList && aclModule.aclList.length > 0) {
        aclModule.aclList.forEach(acl => {
          if (acl.checked) {
            defaultCheck1Data.value.push(outIndex.value)
          }
          totalModuleList[i].children.push({
            id: outIndex.value,
            moduleId: aclModule.id,
            aclId: acl.id,
            label: acl.name + (acl.type === 1 ? '(菜单)' : ''),
            isLast: true,
            opened: false
          })
          outIndex.value++
        })
      }
      console.log('defaultCheck1Data : ' + JSON.stringify(defaultCheck1Data.value))
      console.log('totalModuleList : ' + JSON.stringify(totalModuleList))
    })
  }
  return totalModuleList
}

// 属性结构配置
const defaultProps = {
  id: 'id',
  children: 'children',
  label: 'label'
}

watch(
  () => props.roleId,
  val => {
    if (val) loadRoleAcl(val)
  }
)

/**
  确定按钮点击事件
 */
const onConfirm = async () => {
  const result = await changeAcls({
    roleId: props.roleId,
    aclIds: aclIds.value
  })
  if (result) {
    utils.showSuccess('保存角色与权限点成功')
  } else {
    utils.showError('保存角色与权限点失败')
  }
  closed()
}

/**
 * 关闭
 */
const closed = () => {
  emits('update:modelValue', false)
  right1Data.value = []
  defaultCheck1Data.value = []
}
</script>

<style lang="scss" scoped></style>
